<template>
  <div class="login">
    <div class="header">
      <div class="left">万顺通物流信息管理系统</div>
      <div>
        <div class="right">
          <div>
            <div>
              <div v-if="isShow" @click="loginHandle">
                <i class="el-icon-s-custom"></i>
                请登录&nbsp;&nbsp;/&nbsp;&nbsp;注册
              </div>
              <!-- <div v-else>{{this.personData.name}}</div> -->
            </div>
          </div>
          <div class="right_edit" v-if="this.personData && this.personData.name">
            {{ this.personData.name }}
          </div>
          <div class="right_edit edit" v-if="this.personData && this.personData.name">
            <el-popconfirm title="确定要退出当前账号嘛" @confirm="exitHandle">
              <el-button slot="reference">退出</el-button>
            </el-popconfirm>
          </div>
        </div>
      </div>
    </div>
    <div class="body">
      <div class="top">
        <div class="left">
          <img style="margin-top: 10px" src="@/image/logo.png" alt="" />
        </div>
        <div class="right">
          <div class="Tabclick" :class="this.active == 'first' ? 'clickTab' : ''" @click="clickHandle('first')">
            首页
          </div>
          <!-- <div
            class="Tabclick"
            :class="this.active == 'second' ? 'clickTab' : ''"
            @click="clickHandle('second')"
          >
            物流信息查询
          </div> -->
          <div class="Tabclick" :class="this.active == 'three' ? 'clickTab' : ''" @click="clickHandle('three')">
            订单管理
          </div>
          <div class="Tabclick" :class="this.active == 'four' ? 'clickTab' : ''" @click="clickHandle('four')">
            个人资料
          </div>
          <div class="Tabclick" :class="this.active == 'five' ? 'clickTab' : ''" @click="clickHandle('five')">
            关于我们
          </div>
        </div>
        <div class="header_icon" @click="addOrderHandle" v-if="this.personData && this.personData.name">
          <span>立即下单</span><i title="增加" class="el-icon-circle-plus-outline"></i>
        </div>
      </div>
      <div class="content">
        <div class="content_body" v-if="this.active == 'first'">
          <div class="block">
            <el-carousel trigger="click" height="500px">
              <el-carousel-item v-for="item in imgList" :key="item.id">
                <img :src="item.src" style="height: 100%; width: 100%" />
                <el-image></el-image>
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="news">
            <h1>新闻资讯</h1>
            <div class="news_body">
              <div class="news_num" @click="queryHandle('one')">
                <div class="left">
                  <img style="object-fit: revert" src="@/image/new2.png" />
                </div>
                <div class="right">
                  <span class="span">
                    全国政协委员王均金：航空物流业如何打破信息孤岛
                  </span>
                </div>
              </div>
              <div class="news_num" @click="queryHandle('two')">
                <div class="left">
                  <img style="object-fit: none" src="@/image/newsBody.jpg" />
                </div>
                <div class="right">
                  <span class="span">
                    福建将建设投用“丝路海运”信息化平台
                    推动港口间数据互联提高物流效率
                  </span>
                </div>
              </div>
              <div class="news_num" @click="queryHandle('three')">
                <div class="left">
                  <img style="object-fit: none" src="@/image/shunfeng2.jpg" />
                </div>
                <div class="right">
                  <span class="span">
                    牵手信息服务“国家队”：圆通速递与中国航信开展全面战略合作
                    共创“航空+物流”新模式
                  </span>
                </div>
              </div>
              <div class="news_num" @click="queryHandle('four')">
                <div class="left">
                  <img style="object-fit: unset" src="@/image/news1.png" />
                </div>
                <div class="right">
                  <span class="span">
                    国家电网与顺丰供应链深入物流信息化合作
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div class="bottom">
            <div class="left">
              <span>使用条款 | 隐私政策</span>
            </div>
            <div class="right">
              <div class="img">
                <img src="@/image/bottom.png" alt="" />
                <img src="@/image/bottom1.png" alt="" />
              </div>
              <div class="text">
                <span>粤公网安备 44030509003091号</span>
                <span>粤 ICP 备56664243号</span>
              </div>
            </div>
          </div>
        </div>
        <div class="content_body" v-if="this.active == 'second'">
          物流信息查询
          <span>{{ this.splitUser }}</span>
        </div>
        <div class="content_body" v-if="this.active == 'three'">
          <div class="userManager">
            <el-table :data="userList" border style="width: 100%" class="editTable" :header-cell-style="{ background: '#F0F3FA', color: '#606266' }">
              <el-table-column prop="index" label="序号" header-align="center" :show-overflow-tooltip="true" align="center" :width="60">
                <template slot-scope="scope">
                  <span>{{ (currentPage - 1) * size + scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="goodsName" label="物品" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <span v-if="scope.row.goodsName">{{
                    scope.row.goodsName
                  }}</span>
                  <span v-else>空</span>
                </template>
              </el-table-column>
              <el-table-column prop="specification" label="重量" align="center" :show-overflow-tooltip="true" :width="80">
                <template slot-scope="scope">
                  <span v-if="scope.row.specification">{{
                    scope.row.specification
                  }}</span>
                  <span v-else>空</span>
                </template>
              </el-table-column>
              <el-table-column prop="price" label="价格" align="center" :show-overflow-tooltip="true" :width="80">
                <template slot-scope="scope">
                  <span v-if="scope.row.price">{{ scope.row.price }}</span>
                  <span v-else>空</span>
                </template>
              </el-table-column>
              <el-table-column prop="payState" label="支付状态" align="center" :show-overflow-tooltip="true" :width="80">
                <template slot-scope="scope">
                  <span v-if="scope.row.payState">
                    <span v-if="scope.row.payState == 0">未支付</span>
                    <span v-if="scope.row.payState == 1">已支付</span>
                  </span>
                  <span v-else>空</span>
                </template>
              </el-table-column>
              <el-table-column prop="audit" label="审核状态" align="center" :show-overflow-tooltip="true" :width="80">
                <template slot-scope="scope">
                  <span v-if="scope.row.audit">
                    <span v-if="scope.row.audit == 0">未审核</span>
                    <span v-if="scope.row.audit == 1">已审核</span>
                  </span>
                  <span v-else>空</span>
                </template>
              </el-table-column>
              <!-- 单位取稿数 -->
              <el-table-column prop="senderAddress" label="寄件地址" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <span v-if="scope.row.senderAddress">{{
                    scope.row.senderAddress
                  }}</span>
                  <span v-else>空</span>
                </template>
              </el-table-column>
              <el-table-column prop="recipientName" label="收件名字" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <span v-if="scope.row.recipientName">{{
                    scope.row.recipientName
                  }}</span>
                  <span v-else>空</span>
                </template>
              </el-table-column>
              <el-table-column prop="recipientPhone" label="收件人电话" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <span v-if="scope.row.recipientPhone">{{
                    scope.row.recipientPhone
                  }}</span>
                  <span v-else>空</span>
                </template>
              </el-table-column>
              <el-table-column prop="recipientAddress" label="收件地址" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <span v-if="scope.row.recipientAddress">{{
                    scope.row.recipientAddress
                  }}</span>
                  <span v-else>空</span>
                </template>
              </el-table-column>
              <el-table-column prop="shippingStatus" label="物流信息" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <span v-if="scope.row.shippingStatus">
                    <span v-if="scope.row.shippingStatus == 1">配送中</span>
                    <span v-if="scope.row.shippingStatus == 2">未发货</span>
                    <span v-if="scope.row.shippingStatus == 3">送达</span>
                  </span>
                  <span v-else>空</span>
                </template>
              </el-table-column>
              <!--单位发表稿件数  -->

              <!-- 单位投稿到上级数 -->
              <el-table-column prop="videodown" label="操作" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <!-- <i
                    style="margin-right: 10px; color: #409eff"
                    class="el-icon-edit"
                    title="修改"
                    @click="popDialog('修改用户', scope.row)"
                  /> -->
                  <i style="color: red" class="el-icon-delete" title="删除订单" @click="popDialog('删除订单', scope.row)" />
                </template>
              </el-table-column>
            </el-table>
            <!-- 订单管理分页在这里写 -->
            <div v-if="total >10" style="margin-top:30px">
              <el-pagination background class="page_pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                :page-sizes="[10, 20, 50]" :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
            </div>
          </div>
          <div class="bottom" style="position: fixed; bottom: 0">
            <div class="left">
              <span>使用条款 | 隐私政策</span>
            </div>
            <div class="right">
              <div class="img">
                <img src="@/image/bottom.png" alt="" />
                <img src="@/image/bottom1.png" alt="" />
              </div>
              <div class="text">
                <span>粤公网安备 44030509003091号</span>
                <span>粤 ICP 备56664243号</span>
              </div>
            </div>
          </div>
        </div>
        <div class="content_body" v-if="this.active == 'four'">
          <div class="personal_data">
            <div class="body_table">
              <div class="img">
                <img src="@/image/userData.png" alt="" />
              </div>
              <div class="name_t">
                <div class="name">
                  <div style="
                      display: flex;
                      margin-left: 160px;
                      font-weight: 400;
                      color: #999;
                      font-size: 12px;
                    ">
                    我的用户名：
                  </div>
                  <div class="content">
                    {{ this.personData.name }}
                  </div>
                </div>
                <div class="name">
                  <div style="
                      display: flex;
                      margin-left: 160px;
                      font-weight: 400;
                      color: #999;
                      font-size: 12px;
                    ">
                    我的昵称：
                  </div>
                  <div class="content">
                    {{
                      this.personData.nikeName
                        ? this.personData.nikeName
                        : "暂无"
                    }}
                  </div>
                </div>
                <div class="name">
                  <div style="
                      display: flex;
                      margin-left: 160px;
                      font-weight: 400;
                      color: #999;
                      font-size: 12px;
                    ">
                    我的年龄：
                  </div>
                  <div class="content">
                    {{ this.personData.age }}
                  </div>
                </div>
                <div class="name">
                  <div style="
                      display: flex;
                      margin-left: 160px;
                      font-weight: 400;
                      color: #999;
                      font-size: 12px;
                    ">
                    我的密码：
                  </div>
                  <div class="content icon_content">
                    {{ isTrue ? "**************" : this.personData.password }}
                    <span><i class="el-icon-view" @click="isTrue = !isTrue"></i></span>
                  </div>
                </div>
                <div class="name">
                  <div style="
                      display: flex;
                      margin-left: 160px;
                      font-weight: 400;
                      color: #999;
                      font-size: 12px;
                    ">
                    我的电话号码：
                  </div>
                  <div class="content">
                    {{ this.personData.phone }}
                  </div>
                </div>
              </div>
              <div class="button">
                <el-button type="primary" @click="updateHandle">修改资料</el-button>
              </div>
            </div>
          </div>
          <div class="bottom" style="position: fixed; bottom: 0">
            <div class="left">
              <span>使用条款 | 隐私政策</span>
            </div>
            <div class="right">
              <div class="img">
                <img src="@/image/bottom.png" alt="" />
                <img src="@/image/bottom1.png" alt="" />
              </div>
              <div class="text">
                <span>粤公网安备 44030509003091号</span>
                <span>粤 ICP 备56664243号</span>
              </div>
            </div>
          </div>
        </div>
        <div class="content_body contact_body" v-if="this.active == 'five'">
          <div>
            <h1 style="font-size: 40px; margin: 80px">公司介绍</h1>
          </div>
          <div class="contactMy">
            <div class="left"><img src="@/image/contact1.jpg" alt="" /></div>
            <div class="right">
              2022年，万顺通（股票代码：002352）诞生于广东湛江。万顺通是国内领先的综合物流服务商、全球第四大快递公司，致力于成为独立第三方行业解决方案的数据科技服务公司，以领先的技术赋能客户，为客户提供涵盖多行业、多场景、智能化、一体化的智慧供应链解决方案。
              公司围绕物流生态圈，横向拓展多元业务领域，纵深完善产品分层，满足不同细分市场需求，覆盖客户完整供应链条。经过多年发展，依托于公司拥有的覆盖全国和全球主要国家及地区的高渗透率的快递网络基础上，通过内生孵化+并购整合方式，快速延伸至快运、冷运、同城、供应链等领域，搭建了完整的一体化综合物流服务体系；不仅能够提供配送端的高质量物流服务，还能围绕客户产业链上下游延伸，为客户提供贯穿采购、生产、流通、销售、售后的一体化供应链解决方案。
              同时,万顺通还是一家具有“天网+地网+信息网”网络规模优势的智能物流运营商，拥有对全网络强有力管控的经营模式。
              马上联系我们
            </div>
          </div>
          <div style="width: 100%; height: 100px"></div>
          <div class="bottom">
            <div class="left">
              <span>使用条款 | 隐私政策</span>
            </div>
            <div class="right">
              <div class="img">
                <img src="@/image/bottom.png" alt="" />
                <img src="@/image/bottom1.png" alt="" />
              </div>
              <div class="text">
                <span>粤公网安备 44030509003091号</span>
                <span>粤 ICP 备56664243号</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 登录窗口 -->
    <div class="logindialog">
      <el-dialog title="" :visible.sync="dialogVisible" width="30%">
        <template>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="用户登录" name="first">
              <div class="login_Name" v-if="this.Registered == 'login'">
                <img style="margin-top: 10px; margin-bottom: 30px" src="@/image/logo.png" alt="" />
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                  <el-form-item prop="name">
                    <el-input type="text" placeholder="请输入用户名或者手机号" required="required" v-model="ruleForm.name" prefix-icon="el-icon-user-solid"></el-input>
                  </el-form-item>
                  <el-form-item prop="password">
                    <el-input type="password" placeholder="请输入密码" prefix-icon="el-icon-lock" v-model="ruleForm.password" @keyup.enter.native="toSubmitForm('ruleForm')"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button class="button_click" type="primary" @click="submitForm('ruleForm')">登录</el-button>
                    <el-button @click="registerHandle('regsiter')" class="button_click" type="success">注册</el-button>
                  </el-form-item>
                </el-form>
              </div>
              <div class="login_register" v-if="this.Registered == 'regsiter'">
                <!-- <div class="left"><i class="el-icon-back"></i></div> -->
                <div class="form">
                  <el-form :rules="rulesRegsiter" ref="form" :model="form" label-width="80px">
                    <el-form-item label="用户名" prop="name">
                      <el-input placeholder="请输入用户名" v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="昵称" prop="nikeNAme">
                      <el-input placeholder="请输入昵称" v-model="form.nikeName"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                      <el-input placeholder="请输入密码" v-model="form.password"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄" prop="age">
                      <el-input placeholder="请输入年龄" v-model="form.age"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号码" prop="phone">
                      <el-input placeholder="请输入手机号码或者固定号码" v-model="form.phone"></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button class="button_click" type="primary" @click="regsiterHed('form')">注册</el-button>
                      <!-- <el-button class="button_click" type="'success'"
                        >返回</el-button
                      > -->
                    </el-form-item>
                  </el-form>
                  <div class="reture" @click="Registered = 'login'" style="
                      margin-left: 480px;
                      font-size: 16px;
                      display: inline-block;
                      cursor: pointer;
                    ">
                    返回登录
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="员工登录" name="third">
              <!-- 员工登录 -->
              <img style="margin-top: 10px; margin-bottom: 30px" src="@/image/logo.png" alt="" />
              <el-form :model="userForm" :rules="rules" ref="userForm" label-width="100px" class="demo-ruleForm">
                <el-form-item prop="name">
                  <el-input type="text" placeholder="请输入员工用户名或者手机号" required="required" v-model="userForm.name" prefix-icon="el-icon-user-solid"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input type="password" placeholder="请输入密码" prefix-icon="el-icon-lock" v-model="userForm.password" @keyup.enter.native="toSubmitForm('userForm')"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button class="button_click" type="primary" @click="submitUserForm('userForm')">登录</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="管理员登录" name="second">
              <img style="margin-top: 10px; margin-bottom: 30px" src="@/image/logo.png" alt="" />
              <el-form :model="manageForm" :rules="rules" ref="manageForm" label-width="100px" class="demo-ruleForm">
                <el-form-item prop="name">
                  <el-input type="text" placeholder="请输入管理员用户名或者手机号" required="required" v-model="manageForm.name" prefix-icon="el-icon-user-solid"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input type="password" placeholder="请输入密码" prefix-icon="el-icon-lock" v-model="manageForm.password" @keyup.enter.native="toSubmitForm('manageForm')">
                  </el-input>
                </el-form-item>
                <el-form-item>
                  <el-button class="button_click" type="primary" @click="submitManageForm('manageForm')">登录</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </template>
      </el-dialog>
    </div>
    <!-- 新增订单 -->
    <div class="addOrder">
      <el-dialog title="下单" :visible.sync="dialogorder" width="30%" :before-close="handleClose">
        <div class="form_table">
          <el-form :label-position="labelPosition" label-width="80px" :model="formOrder">
            <div class="table">
              <el-form-item label="货品名称">
                <el-input v-model="formOrder.goodsName"></el-input>
              </el-form-item>
              <el-form-item label="重量">
                <el-input v-model="formOrder.specification"></el-input>
                <span style="
                    position: absolute;
                    right: 43%;
                    font-size: 18px;
                    color: red;
                  ">KG/公斤</span>
              </el-form-item>
              <el-form-item label="运费">
                <el-input :disabled="true" v-model="formOrder.price"></el-input>
                <span style="
                    position: absolute;
                    right: 40%;
                    font-size: 18px;
                    color: red;
                  ">RMB/人民币</span>
              </el-form-item>
            </div>
            <el-form-item label="寄件人地址">
              <el-input v-model="formOrder.senderAddress"></el-input>
            </el-form-item>
            <el-form-item label="收件人姓名">
              <el-input v-model="formOrder.recipientName"></el-input>
            </el-form-item>
            <el-form-item label="收件人电话">
              <el-input v-model="formOrder.recipientPhone"></el-input>
            </el-form-item>
            <el-form-item label="收件人地址">
              <el-input v-model="formOrder.recipientAddress"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogorder = false">取 消</el-button>
          <el-button type="primary" @click="submitOrderHandle">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 修改用户数据 -->
    <div class="upData">
      <el-dialog title="修改资料" :visible.sync="dialogUpdate" width="30%" :before-close="handleClose">
        <div class="updata_login">
          <el-form :rules="rulesRegsiter" ref="form" :model="form" label-width="80px">
            <el-form-item label="用户名" prop="name">
              <el-input placeholder="请输入用户名" v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="昵称" prop="nikeNAme">
              <el-input placeholder="请输入昵称" v-model="form.nikeName"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input placeholder="请输入密码" v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
              <el-input placeholder="请输入年龄" v-model="form.age"></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
              <el-input placeholder="请输入手机号码或者固定号码" v-model="form.phone"></el-input>
            </el-form-item>
            <!-- <el-form-item>
              <el-button
                class="button_click"
                type="primary"
                @click="regsiterHed('form')"
                >注册</el-button
              >

            </el-form-item> -->
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogUpdate = false">取 消</el-button>
          <el-button type="primary" @click="updateHandleIcon('form')">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  login,
  register,
  exitLogin,
  getOrderlist,
  addOreder,
  userLogin,
  personalList,
  updateUser,
  getUserdata,
} from "@/api/login.js";
export default {
  data() {
    return {
      total: 0,

      dialogUpdate: false,
      labelPosition: "right",
      dialogorder: false,
      size: 10,
      currentPage: 1,
      form: {
        name: "",
        password: "",
        age: "",
        phone: "",
        nikeName: "",
        type: 1,
      },
      Registered: "login",
      activeName: "first",
      ruleForm: {
        name: "",
        password: "",
      },
      manageForm: {
        name: "",
        password: "",
      },
      userForm: {
        name: "",
        password: "",
      },
      dialogVisible: false,
      active: "first",
      imgList: [
        {
          name: "log1",
          src: require("@/image/imagelog1.jpg"),
          id: 1,
        },
        {
          name: "log2",
          src: require("@/image/imagelog2.jpg"),
          id: 2,
        },
        {
          name: "log3",
          src: require("@/image/imagelog3.jpg"),
          id: 3,
        },
      ],
      rulesRegsiter: {
        name: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
          {
            min: 2,
            max: 8,
            message: "长度在 2 到 8个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 8,
            max: 16,
            message: "长度在 8 到 16 个字符",
            trigger: "blur",
          },
        ],
        phone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "长度在 11 个字符",
            trigger: "blur",
          },
        ],
        nikeName: [
          { required: true, message: "请输入昵称", trigger: "blur" },
          {
            min: 1,
            max: 6,
            message: "长度在 1到 6 个字符",
            trigger: "blur",
          },
        ],
        // age: [
        //   { required: false, message: "请输入年龄", trigger: "blur" },
        //   {
        //     min: 2,
        //     max: 3,
        //     message: "长度在 2 到 3 个字符",
        //     trigger: "blur",
        //   },
        // ],
        splitUser: [],
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入用户名或者手机号",
            trigger: "blur",
          },
          {
            min: 1,
            max: 16,
            message: "长度在 1 到 16 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 1,
            max: 16,
            message: "长度在 1 到 16 个字符",
            trigger: "blur",
          },
        ],
      },
      isTrue: true,
      personData: [],
      managerData: [],
      isShow: true,
      userList: [],
      formOrder: {
        goodsName: "",
        senderAddress: "",
        recipientName: "",
        recipientPhone: "",
        specification: "",
        recipientAddress: "",
        price: 0,
      },
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val;
      this.getUserList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getUserList();
    },
    updateHandle() {
      console.log("点击了icon");
      this.dialogUpdate = true;

      this.form.name = this.personData.name;
      this.form.password = this.personData.password;
      this.form.age = this.personData.age;
      this.form.nikeName = this.personData.nikeName;
      this.form.phone = this.personData.phone;
      this.form.type = this.personData.type;
    },
    submitOrderHandle() {
      let params = {};
      params.goodsName = this.formOrder.goodsName;
      params.senderAddress = this.formOrder.senderAddress;
      params.recipientName = this.formOrder.recipientName;
      params.recipientPhone = this.formOrder.recipientPhone;
      params.specification = this.formOrder.specification;
      params.recipientAddress = this.formOrder.recipientAddress;
      params.price = this.formOrder.price;
      params.customerId = this.personData.id;
      console.log(params);
      addOreder(params).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          this.dialogorder = false;
          this.$message({
            message: "订单新增成功",
            type: "success",
          });
        }
      });
    },
    //获取用户订单
    getUserList() {
      let params = {};
      params.pageSize = this.size;
      params.pageNo = this.currentPage;
      params.userId = this.personData.id;
      personalList(params).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          this.userList = res.data.list;
          this.total = res.data.total;
        }
      });
    },
    queryHandle(query) {
      console.log(query);
      if (query === "one") {
        // this.$router.push({name:"newsInformation",params:{type:query}})
        // this.$router.push({ path: "/newsInformation", query: { type: query } });
        let routes = this.$router.resolve({
          path: "/newsInformation",
          query: { type: query },
        });
        window.open(routes.href, "_blank");
      }
      if (query == "two") {
        let routes = this.$router.resolve({
          path: "/newsInformation",
          query: { type: query },
        });
        window.open(routes.href, "_blank");
      }
      if (query == "three") {
        let routes = this.$router.resolve({
          path: "/newsInformation",
          query: { type: query },
        });
        window.open(routes.href, "_blank");
      }
      if (query == "four") {
        let routes = this.$router.resolve({
          path: "/newsInformation",
          query: { type: query },
        });
        window.open(routes.href, "_blank");
      }
    },
    registerHandle(_register) {
      this.Registered = _register;
    },
    submitForm(ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          // alert('submit!');
          let params = {};
          params.name = this.ruleForm.name;
          params.password = this.ruleForm.password;
          params.type = 1;
          login(params).then((res) => {
            if (res.code == 200) {
              this.personData = res.data;
              console.log(this.personData);
              this.dialogVisible = false;
              this.$message({
                message: "登录成功",
                type: "success",
              });
              const loginUser = res.data;
              localStorage.setItem("loginUser", JSON.stringify(loginUser));
              this.isShow = false;
            } else if (res.code == 400) {
              this.$message({
                message: "密码错误,请重新登录",
                type: "warning",
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    updateHandleIcon(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          // alert('submit!');
          let params = {};

          params.id = this.personData.id;
          params.name = this.form.name;
          params.password = this.form.password;
          params.age = this.form.age;
          params.nikeName = this.form.nikeName;
          params.phone = this.form.phone;
          params.type = this.form.type;
          updateUser(params).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: "修改成功",
                type: "success",
              });
              this.dialogUpdate = false;
              let parasmID = {};
              parasmID.id = this.personData.id;
              getUserdata(parasmID).then((res) => {
                // console.log(res);
                if (res.code == 200) {
                  this.personData = res.data;
                }
              });
            }
          });
        }
      });
    },
    regsiterHed(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          // alert('submit!');
          let params = {};
          params.name = this.form.name;
          params.password = this.form.password;
          params.age = this.form.age;
          params.nikeName = this.form.nikeName;
          params.phone = this.form.phone;
          params.type = this.form.type;
          register(params).then((res) => {
            console.log(res);
            if (res.code == 200) {
              this.$message({
                message: "注册成功",
                type: "success",
              });
              this.dialogVisible = false;
              this.Registered = "login";
            } else {
              this.$message({
                message: "注册失败",
                type: "danger",
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 管理员登录
    submitManageForm(manageForm) {
      this.$refs[manageForm].validate((valid) => {
        if (valid) {
          let params = {};
          params.name = this.manageForm.name;
          params.password = this.manageForm.password;
          params.type = 0;
          login(params).then((res) => {
            console.log(res);
            if (res.code == 200) {
              this.managerData = res.data;
              console.log(this.managerData);
              this.dialogVisible = false;
              this.$message({
                message: "登录成功",
                type: "success",
              });
              const manageUesr = res.data;
              localStorage.setItem("manageUesr", JSON.stringify(manageUesr));
              this.$router.push({ path: "/center" });
            } else if (res.code == 400) {
              this.$message({
                message: "密码错误,请重新登录",
                type: "warning",
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    submitUserForm(userForm) {
      this.$refs[userForm].validate((valid) => {
        if (valid) {
          let params = {};
          params.name = this.userForm.name;
          params.password = this.userForm.password;
          console.log(params);
          userLogin(params).then((res) => {
            // console.log(res);
            if (res.code == 200) {
              this.dialogVisible = false;
              this.$message({
                message: "登录成功",
                type: "success",
              });
              this.$router.push({ path: "/userCenter" });
              const userData = res.data;
              localStorage.setItem("userData", JSON.stringify(userData));
            } else if (res.code == 400) {
              this.$message({
                message: "密码错误,请重新登录",
                type: "warning",
              });
            }
          });
          // console.log("员工登录");
          // this.$message({
          //   message: "登录成功",
          //   type: "success",
          // });
          // this.$router.push({ path: "/userCenter" });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    loginHandle() {
      this.dialogVisible = true;
    },
    // 退出
    exitHandle() {
      console.log("点击退出了");
      localStorage.setItem("loginUser", "");
      this.personData = [];
      this.isShow = true;
      // exitLogin().then((res) => {
      //   // console.log(res);
      //   if (res.code == 200) {
      //   }
      // });
    },
    clickHandle(_active) {
      this.active = _active;
      if (_active == "three") {
        console.log("触发了订单管理");
        this.getUserList();
      }
    },
    handleClose() {},
    // 登录接口
    getloginHandle() {
      let params = {};
      params.name = "pp";
      params.password = "111";
      params.type = "0";
      // login(params).then((res)=>{
      //   console.log("打印了");
      //   console.log(res)

      // })
      console.log(params);
      login(params).then((res) => {
        console.log(res);
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    // 刷新时
    refreshHandle() {
      const data = localStorage.getItem("loginUser");
      const loginUser = JSON.parse(data);
      this.personData = loginUser;
      if (this.personData && this.personData.name) {
        this.isShow = false;
      }
      console.log(this.personData);
    },
    addOrderHandle() {
      console.log("增加");
      this.dialogorder = true;
    },
  },
  created() {
    this.clickHandle("first");
    // this.getloginHandle();
    this.refreshHandle();
  },
  watch: {
    "this.formOrder.specification": function () {
      console.log(this.formOrder.specification);
    },
    isShow: {
      handler() {
        if (this.personData && this.personData.name) {
          this.isShow = false;
        }
      },
      deep: true,
    },
    "formOrder.specification": {
      handler(value) {
        console.log(value);
        this.formOrder.price = value * 22;
      },
      deep: true,
    },
    active: {
      handler() {
        console.log(this.active);
        if (this.personData && this.personData.name) {
        } else if (this.active == "four" || this.active == "three") {
          this.$message({
            message: "请先登录",
            type: "warning",
          });
          this.active = "first";
        }
      },
      deep: true,
    },
  },
};
</script>

<style lang='scss' scope>
#app {
  margin: 0px;
}
.login {
  .header {
    position: relative;
    width: 100%;
    background: #222632;
    height: 45px;
    display: flex;
    justify-content: space-between;

    .left {
      margin-left: 300px;
      line-height: 45px;
      padding: 0 20px;
      color: #dedfe0;
      font-size: 16px;
    }
    .right {
      position: relative;
      // float: left;
      line-height: 45px;
      margin-right: 350px;
      color: #ffffff;
      font-size: 12px;
      &:hover {
        cursor: pointer;
      }
      .right_edit {
        position: absolute;
        top: 0px;
        right: -30px;
        cursor: pointer;
        width: 50px;
      }
      .edit {
        right: -80px;
        .el-button {
          background: #222632;
          border: 0px;
          color: #fff;
        }
      }
    }
  }
  .body {
    background: #ffffff;
    height: 600px;
    width: 100%;
    //  margin: 0px 300px;
    margin: 0px auto;
    position: relative;
    .header_icon {
      cursor: pointer;
      position: absolute;
      right: 50px;
      font-size: 20px;
      bottom: 0;
      top: 20px;
      // color: #fff;
      display: inline-block;
      border: 1px solid #222632;
      padding: 3px;
      border-radius: 5px;
      height: 30px;
      &:hover {
        background: #222632;
        color: #fff;
      }
    }
    .top {
      width: 100%;
      height: 80px;
      display: flex;
      justify-content: space-between;

      .left {
        margin-left: 300px;
        img {
          //  line-height: 80px;
          margin-top: 5px;
        }
      }
      .right {
        margin-right: 300px;
        .Tabclick {
          color: #333;
          display: inline-block;
          line-height: 80px;
          padding: 0px 20px;
          cursor: pointer;
          &:hover {
            background: #222632;
            color: #ffffff;
          }
        }
        .clickTab {
          background: #222632;
          color: #ffffff;
        }
      }
    }
    .content {
      .bottom {
        margin-top: 50px;
        background: #222632;
        display: flex;
        justify-content: space-around;
        width: 100%;
        height: 120px;
        .left {
          margin-top: 30px;
          color: #fff;
          cursor: pointer;
        }
        .right {
          display: flex;
          .img {
            width: 80px;
            height: 30px;
            display: flex;
            margin-top: 30px;
            img {
              width: 100%;
              height: 100%;
              &:nth-child(1) {
                margin-right: 30px;
              }
            }
          }
          .text {
            cursor: pointer;
            color: #fff;
            font-size: 14px;
            margin-top: 30px;
            margin-left: 160px;
            display: inline-block;
            span {
              display: block;
            }
          }
        }
      }
      .content_body {
        .el-carousel__item h3 {
          color: #475669;
          font-size: 14px;
          opacity: 0.75;
          line-height: 150px;
          margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
          background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n + 1) {
          background-color: #d3dce6;
        }
        .userManager {
          height: 600px;
          padding-top: 30px;
          background: #faf0dc;
          .el-table {
            // margin-top: 30px;
            margin: auto;
            width: 80% !important;
          }
        }
        .personal_data {
          height: 600px;
          padding-top: 30px;
          background: #faf0dc;
          .body_table {
            position: relative;
            width: 50%;
            height: 500px;
            background: #ffffff;
            margin: auto;
            .img {
              padding-top: 20px;
            }
            .name_t {
              // display: inline-block;
              display: flex;
              flex-wrap: wrap;
              .name {
                padding-bottom: 25px;
                margin-bottom: 30px;
                width: 460px;
                height: 60px;
                font-size: 26px;
                .content {
                  line-height: 40px;
                  border-bottom: 1px solid #999999;
                  margin-left: 160px;
                  display: flex;
                }
                .icon_content {
                  position: relative;
                  span {
                    position: absolute;
                    right: 0;
                  }
                }
              }
            }
            .button {
              position: absolute;
              right: 0;
              bottom: 0;
              margin: 20px;
            }
          }
        }
      }
      .contact_body {
        .contactMy {
          height: 400px;
          width: 60%;
          margin: auto;
          .left {
            float: left;
            width: 400px;
            height: 400px;
            margin-right: 20px;
            img {
              width: 400px;
              height: 400px;
              object-fit: cover;
            }
          }
          .right {
            line-height: 38px;
            font-size: 22px;
            font-weight: bold;
          }
        }
        .bottom {
          margin-top: 50px;
          background: #222632;
          display: flex;
          justify-content: space-around;
          width: 100%;
          height: 120px;
          position: fixed;
          bottom: 0;
          .left {
            margin-top: 30px;
            color: #fff;
            cursor: pointer;
          }
          .right {
            display: flex;
            .img {
              width: 80px;
              height: 30px;
              display: flex;
              margin-top: 30px;
              img {
                width: 100%;
                height: 100%;
                &:nth-child(1) {
                  margin-right: 30px;
                }
              }
            }
            .text {
              cursor: pointer;
              color: #fff;
              font-size: 14px;
              margin-top: 30px;
              margin-left: 160px;
              display: inline-block;
              span {
                display: block;
              }
            }
          }
        }
      }
      .news {
        margin-top: 30px;
        .news_body {
          display: flex;
          margin: 40px 200px;
          flex-wrap: wrap;
          justify-content: center;
          .news_num {
            cursor: pointer;
            overflow: hidden;
            border-radius: 5px;
            width: 600px;
            height: 200px;
            background: #dadce0;
            display: flex;
            &:nth-child(2n-1) {
              margin-right: 100px;
            }
            &:nth-child(1) {
              margin-bottom: 30px;
            }
            &:nth-child(2) {
              margin-bottom: 30px;
            }
            .left {
              margin-right: 10px;
              width: 200px;
              height: 200px;
              display: inline-block;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .right {
              margin: 10px 10px 10px 0px;
              width: 400px;
              height: 200px;
              .span {
                box-sizing: border-box;
                overflow: hidden;
                text-overflow: ellipsis;
                margin-top: 100px;
                // white-space: nowrap;
                font-size: 30px;
                color: #333;
                font-weight: 500;
              }
            }
          }
        }
      }
    }
  }
  .logindialog {
    .el-dialog {
      width: 40% !important;
      .el-dialog__header {
        height: 5px;
        background: #232632 !important;
        padding-top: 0px;
      }
      .el-dialog_body {
        height: 460px;
      }
      .el-tabs__item {
        font-size: 20px;
      }
      .button_click {
        width: 200px;
        height: 60px;
        border-radius: 10px;
      }
      .el-button {
        font-size: 18px;
      }
      .el-tabs__content {
        position: relative;
      }
      .login_register {
        .el-form {
          margin-top: 20px !important;
          width: 75%;
          margin: auto;
        }
        position: relative;
        .left {
          position: absolute;
          display: inline-block;
          .el-icon-back {
            display: inline-block;
            font-size: 40px !important;
          }
        }
      }
    }
  }
  .addOrder {
    .el-dialog {
      width: 55% !important;
      .el-dialog__footer {
        text-align: center !important;
      }
      .el-dialog__header {
        font-size: 18px !important;
      }
      .form_table {
        .el-form {
          .el-form-item {
            .el-form-item__label {
              width: 160px !important;
            }
            .el-form-item__content {
              .el-input {
                width: 80%;
                // left: -25%;
              }
            }
          }
        }
        .table {
          .el-form-item {
            .el-form-item__label {
              width: 160px !important;
            }
            .el-form-item__content {
              .el-input {
                left: -25%;
                width: 30%;
              }
            }
          }
        }
      }
    }
  }
  .upData {
    .el-dialog {
      width: 50% !important;
      .el-dialog__footer {
        text-align: center !important;
      }
      .el-dialog__header {
        font-size: 18px !important;
      }
      .el-dialog__body {
        .updata_login {
          /deep/ .el-form {
            width: 70%;
            // margin-top: 20px !important;
            // width: 75%;
            // margin: auto;
          }
        }
      }
    }
  }
}
</style>
